<template>
  <div class="news">
    <breadc-rumb>
      <div slot="breadc-button">
        <h-buttom v-if="category != 0" @click="changeCategory(0)" size="btn-medium">{{ $t("new.class.all") }}</h-buttom>
        <h-buttom v-if="category != 1" @click="changeCategory(1)" size="btn-medium">{{ $t("new.class.companyNews")
        }}</h-buttom>
        <h-buttom v-if="category != 2" @click="changeCategory(2)" size="btn-medium">{{ $t("new.class.tradeNews")
        }}</h-buttom>
      </div>
    </breadc-rumb>
    <div class="container" v-loading="listLoading">
      <template v-if="list.length > 0">
        <div class="artcie-list">
          <div class="artcie-list-item hvr-icon-grow" v-for="(item, index) in list" :key="index">
            <router-link :to="{ path: '/News/Article', query: { id: item.id } }">
              <div class="date">{{ item.createDate }}</div>
              <div class="title">{{ item.title }}</div>
              <div class="brief">
                {{ item.brief }}
              </div>
              <div class="iamge-box">
                <el-image class="iamge hvr-icon" :src="item.coverUrl"></el-image>
              </div>
              <div class="btn-group">
                <div class="hvr-grow">
                  DETAILS <i class="iconfont icon-youjiantou "></i>
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <div class="page-tool">
          <el-pagination class="page" background layout="prev, pager, next" :page-size="pageSize"
            :current-page="pageIndex" :total="pageTotal" @current-change="changePageIndex">
          </el-pagination>
        </div>
      </template>
      <template v-else>
        <div class="empty">
          <el-empty :description="$t('new.list.emptyDescription')"></el-empty>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import BreadcRumb from '@/components/BreadcRumb.vue';
import ButtomUrl from "@/components/Button/ButtomUrl";
import * as articleApi from '@/api/web/articleApi';
import HButtom from '@/components/Button/HButtom.vue';

export default {
  components: { BreadcRumb, ButtomUrl, HButtom },
  data () {
    return {
      pageIndex: 0,
      pageTotal: 0,
      pageSize: 20,
      category: 0,
      list: [],
      listLoading: false,
    }
  },
  methods: {
    getArticleList () {
      var self = this;
      self.listLoading = true;
      articleApi.getAllArticles(self.pageIndex, self.category)
        .then(res => {
          if (res.code == 200) {
            self.list = res.data.data;
            self.pageIndex = res.data.pageIndex;
            self.pageSize = res.data.pageSize;
            self.pageTotal = res.data.toalNumber;
            self.listLoading = false;
          }
        })
    },
    changePageIndex (num) {
      var self = this;
      self.pageIndex = num;
      self.getArticleList();
    },
    changeCategory (category) {
      location.href = '/News?category=' + category;
    }
  },
  mounted () {
    if (this.$route.query.category != null) {
      this.category = parseInt(this.$route.query.category);
      switch (this.category) {
        case 1:
          this.$router.currentRoute.meta.lang = 'new.class.companyNews';
          break;
        case 2:
          this.$router.currentRoute.meta.lang = 'new.class.tradeNews';
          break;
      }
    }
    this.getArticleList();
  }
}
</script>

<style scoped>
.artcie-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 50px 0px;
  padding-bottom: 5px;
}

.artcie-list .artcie-list-item {
  width: 33.33%;
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding: 10px;
}



.artcie-list-item .date {
  font-size: 14px;
  color: #606266;
}

.artcie-list-item .title {
  padding: 20px 0px;
  box-sizing: border-box;
  font-size: 22px;
  color: #303133;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: #EBEEF5 1px solid;
  transition: all 0.3s ease-in-out;
}

.artcie-list-item:hover .title {
  border-bottom: #806e22 1px solid;
  transition: all 0.3s ease-in-out;
  color: #806e22;
}

.artcie-list-item .brief {
  width: 100%;
  margin: 20px 0px;
  line-height: 22px;
  box-sizing: border-box;
  font-size: 14px;
  color: #909399;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 45px;
}

.artcie-list-item .iamge {
  width: 100%;
  height: 100%;
}

.artcie-list-item .iamge-box {
  overflow: hidden;
  width: 100%;
  height: 240px;
}

.artcie-list-item .btn-group {
  margin: 20px 0px;
}

.btn-group div {
  font-size: 14px;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: .5px;
  color: #606266;
  transition: all 0.3s ease-in-out;
}

.artcie-list-item:hover .btn-group div {
  transition: all 0.3s ease-in-out;
  color: #806e22;
}

.page-tool {
  padding-bottom: 20px;
  text-align: center;
}

.page>>>.active {
  background-color: #806e22 !important;
  color: #FFF;
}

.page>>>.el-pager li {
  border-radius: 0px;
}

.page>>>.btn-prev {
  border-radius: 0px;
}

.page>>>.btn-next {
  border-radius: 0px;
}

.news>>>.el-loading-spinner .path.path {
  stroke: #806e22
}

.empty {
  width: 100%;
}

.container {
  padding-bottom: 25px;
}

@keyframes border-color-animation {
  to {
    background-size: 100% 1px;
  }
}
</style>